<template>
    <el-row :gutter="20" class="home">
        <el-col :span="8" style="margin-top: 20px;">
            <el-card shadow="hover">
                <div class="user">
                    <img src="../../assets/user.png" alt="">
                    <div class="user-info">
                        <p class="name">Admin</p>
                        <p class="role">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间：<span>2023-03-01</span></p>
                    <p>上次登录地点：<span>北京</span></p>
                </div>
            </el-card>
        </el-col>
        <el-col :span="16" style="margin-top: 20px"></el-col>
    </el-row>
</template>


<script setup>
</script>


<style lang='scss' scoped>
.home {
    width:100% ;
    .user {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;

        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }

        .login-info {
            p {
                line-height: 30px;
                font-size: 14px;
                color: #999;

                span {
                    color: #666;
                    margin-left: 60px;
                }
            }
        }
    }
}
</style>